const {
    ipcRenderer,
    remote
} = require('electron')
const {
    Menu,
    MenuItem
} = remote
const path = require('path')
const audioItem = new Audio()
let allItems = []
let currentItem = null
// 0-顺序播放 1-随机播放 2-单曲循环 3-列表循环
let ctrlIndex = 0
let volumeStatus = true // 默认是有音量的, 音量50%, false-静音

const dist = 0
// dot按钮的初始的位置
let dotTop = 35
let dotY = 0
// 音量初始化
let audioVolume = 0.5
audioItem.volume = audioVolume

let oldVolume = 0

const menu = new Menu()
menu.append(new MenuItem({
    label: '更多菜单',
    role: 'viewMenu',
    accelerator: 'CmdOrCtrl+P',
    click() {
        console.log('item 1 clicked')
    }
}))

window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    menu.popup(remote.getCurrentWindow())
})

$('add').addEventListener('click', function () {
    ipcRenderer.send('add-music-window')
})

const powerMonitorPlay = (type) => {
    const {
        classList
    } = $('play')
    // 如果是断开电源
    if (type === 'battery') {
        if (classList.contains('fa-pause')) {
            classList.replace('fa-pause', 'fa-play')
            audioItem.pause()
            $('lists').querySelector('.fa-pause').classList.replace('fa-pause', 'fa-play')
        }
    } else if (type === 'ac') {
        if (audioItem && audioItem.currentTime !== 0) {
            // 继续播放
            classList.replace('fa-play', 'fa-pause')
            audioItem.play()
            const index = allItems.indexOf(currentItem)
            setAudioText(index)
        } else {
            // 让用户控制播放
        }
    }
}

const bigPlay = (target) => {
    const classList = target.classList
    if (classList.contains('fa-pause')) {
        classList.replace('fa-pause', 'fa-play')
        audioItem.pause()
        $('lists').querySelector('.fa-pause').classList.replace('fa-pause', 'fa-play')
    } else {
        // 初始化播放
        classList.replace('fa-play', 'fa-pause')
        if (currentItem === null) {
            currentItem = allItems[0]
            audioItem.src = currentItem.path
            audioItem.play()
            setAudioText(0)
        } else {
            // 继续播放
            audioItem.play()
            const index = allItems.indexOf(currentItem)
            setAudioText(index)
        }
    }
}

// 全局播放按钮
$('play').addEventListener('click', (event) => {
    const target = event.target
    bigPlay(target)
})

const prevFunc = () => {
    if (ctrlIndex === 0) {
        // 查找是否存在下一首music
        let index = allItems.indexOf(currentItem)
        if (index > 0) {
            // 删除text-primary状态, 删除音乐选择状态
            resetIcons()
            // 说明存在下一首music
            currentItem = allItems[index - 1]
            audioItem.src = currentItem.path
            audioItem.play()
            // 修改播放记录的字体与播放按钮的状态
            setAudioText(index - 1)
        }
    } else if (ctrlIndex === 1) {

        let num = Math.floor(Math.random() * allItems.length)
        let index = allItems.indexOf(currentItem)
        // 排除随机出来的音乐还是当前音乐
        while (num === index) {
            num = Math.floor(Math.random() * allItems.length)
        }
        currentItem = allItems[num]
        // 切换音乐源
        audioItem.src = currentItem.path
        audioItem.play()
        // 设置音乐字体的状态
        resetIcons()
        setAudioText(num)
    } else if (ctrlIndex === 2) {
        audioItem.currentTime = 0
        audioItem.play()
    } else if (ctrlIndex === 3) {
        // 删除text-primary状态, 删除音乐选择状态
        resetIcons()
        // 查找是否存在下一首music
        const index = allItems.indexOf(currentItem)
        if (index > 0) {
            // 说明存在下一首music
            currentItem = allItems[index - 1]
            // 修改播放记录的字体与播放按钮的状态
            setAudioText(index - 1)
        } else {
            // 来到了最后一首歌
            currentItem = allItems[allItems.length - 1]
            setAudioText(allItems.length - 1)
        }
        audioItem.src = currentItem.path
        audioItem.play()
    }
    checkPlayStatus()
}

// 上一首
// 0-顺序播放 1-随机播放 2-单曲循环 3-列表循环
$('prev').addEventListener('click', (event) => {
    prevFunc()
})

const nextFunc = () => {
    if (ctrlIndex === 0) {
        // 查找是否存在下一首music
        const index = allItems.indexOf(currentItem)
        if (index < allItems.length - 1) {
            // 删除text-primary状态, 删除音乐选择状态
            resetIcons()
            // 说明存在下一首music
            currentItem = allItems[index + 1]
            audioItem.src = currentItem.path
            audioItem.play()
            // 修改播放记录的字体与播放按钮的状态
            setAudioText(index + 1)
        }
    } else if (ctrlIndex === 1) {

        let num = Math.floor(Math.random() * allItems.length)
        let index = allItems.indexOf(currentItem)
        // 排除随机出来的音乐还是当前音乐
        while (num === index) {
            num = Math.floor(Math.random() * allItems.length)
        }
        currentItem = allItems[num]
        // 切换音乐源
        audioItem.src = currentItem.path
        audioItem.play()
        // 设置音乐字体的状态
        resetIcons()
        setAudioText(num)
    } else if (ctrlIndex === 2) {
        audioItem.currentTime = 0
        audioItem.play()
    } else if (ctrlIndex === 3) {
        // 删除text-primary状态, 删除音乐选择状态
        resetIcons()
        // 查找是否存在下一首music
        const index = allItems.indexOf(currentItem)
        if (index < allItems.length - 1) {
            // 说明存在下一首music
            currentItem = allItems[index + 1]
            // 修改播放记录的字体与播放按钮的状态
            setAudioText(index + 1)
        } else {
            // 来到了最后一首歌, 继续播放第一首歌
            currentItem = allItems[0]
            setAudioText(0)
        }
        audioItem.src = currentItem.path
        audioItem.play()
    }
    checkPlayStatus()
}

// 下一首
$('next').addEventListener('click', (event) => {
    nextFunc()
})


// 动态计算底部fixed内容的调式, 添加按钮的位置
// document.addEventListener('DOMContentLoaded', function () {
//     const progressWrap = $('progress-wrap').offsetHeight
//     const app = $('app')
//     app.style.paddingBottom = progressWrap + 15 + 'px'
//     const progress = $('progress')
//     progress.style.width = '0%'
// })

ipcRenderer.on('getItems', (event, args) => {
    allItems = args
    renderHTML(args)
})

// 下一首快捷键监听
ipcRenderer.on('next-music', (event, args) => {
    nextFunc()
})

// 上一首快捷键监听
ipcRenderer.on('prev-music', (event, args) => {
    prevFunc()
})

// 暂停播放快捷键监听
ipcRenderer.on('playorpause', (event, args) => {
    const target = $('play')
    bigPlay(target)
})

// 接收模式变量
ipcRenderer.on('change-mode', (event, args) => {
    ctrlIndex = args
    setMusicMode()
})

// 电源监听事件
ipcRenderer.on('power-battery', (event) => {
    powerMonitorPlay('battery')
})

ipcRenderer.on('power-ac', (event) => {
    powerMonitorPlay('ac')
})

// 调整音量
ipcRenderer.on('up-volume', (event) => {
    const dist = 0
    const dotElm = document.querySelector('.dot')
    const progress = document.querySelector('.volume-bar')
    // 设置audio的音量volume
    // 设置dot 的高度
    // 设置volume-progress百分比
    dotTop -= 5
    if (dotTop < dist) {
        dotTop = dist
        audioItem.volume = 1
    } else {
        audioItem.volume = 1 - dotTop / (65 + dist)
        // 调整volume icon的状态为音量状态
        if (audioItem.volume > 0) {
            changeVolumeIcon('show')
        }
    }
    dotElm.style.top = dotTop + 'px'
    progress.style.height = Math.floor(dotTop / (65 + dist) * 100) + '%'
})

ipcRenderer.on('down-volume', (event) => {
    const dist = 0
    const dotElm = document.querySelector('.dot')
    const progress = document.querySelector('.volume-bar')
    // 设置audio的音量volume
    // 设置dot 的高度
    // 设置volume-progress百分比
    dotTop += 5
    if (dotTop > 68 + dist) {
        dotTop = 68 + dist
        audioItem.volume = 0
        // 调整volume icon的状态为静音
        changeVolumeIcon('mute')
    } else {
        audioItem.volume = 1 - dotTop / (68 + dist)
    }
    dotElm.style.top = dotTop + 'px'
    progress.style.height = Math.floor(dotTop / (68 + dist) * 100) + '%'
})

ipcRenderer.on('mute-volume', (event) => {
    changeMuteMode()
})

// 改变音量icon的状态
const changeVolumeIcon = (type) => {
    const icons = document.querySelectorAll('.volume-icon')
    if (type === 'mute') {
        // 设置音量icon成为静音图标
        removeClass(icons[0], 'd-inline')
        addClass(icons[0], 'd-none')
        removeClass(icons[1], 'd-none')
        addClass(icons[1], 'd-inline')
    } else {
        removeClass(icons[1], 'd-inline')
        addClass(icons[1], 'd-none')
        removeClass(icons[0], 'd-none')
        addClass(icons[0], 'd-inline')
    }
}

// 静音切换
const changeMuteMode = () => {
    const dotElm = document.querySelector('.dot')
    const progress = document.querySelector('.volume-bar')
    // 设置audio的音量volume
    // 设置dot 的高度
    // 设置volume-progress百分比
    if (volumeStatus) {
        oldVolume = dotTop
        dotTop = 68
        audioItem.volume = 0
        dotElm.style.top = '68px'
        progress.style.height = '100%'
        changeVolumeIcon('mute')
    } else {
        dotTop = oldVolume
        audioItem.volume = 1 - dotTop / 68
        dotElm.style.top = dotTop + 'px'
        progress.style.height = Math.floor(dotTop / 68 * 100) + '%'
        changeVolumeIcon('show')
    }
    volumeStatus = !volumeStatus
}

const renderHTML = (arr) => {
    const lists = $('lists')
    // 获取路径中的文件名称
    // 动态添加文件名称到页面上来
    // const result = arr.map(item => path.basename(item))
    const htmlstr = arr.reduce((html, item) => {
        html += `<li class="list-group-item no-select xc">
        <div class="row d-flex justify-content-between align-items-center px-3 py-2">
            <div><i class="fa fa-music mr-3" aria-hidden="true"></i>${item.fileName}</div>
            <div class="ctrls">
                <i class="fa ${(currentItem && currentItem.id === item.id && isPlay(audioItem)) ? 'fa-pause':'fa-play'} mr-4" aria-hidden="true" data-id="${item.id}"></i>
                <i class="fa fa-trash" aria-hidden="true" data-id="${item.id}"></i>
            </div>
        </div>
    </li>`
        return html
    }, '')
    lists.innerHTML = `<ul class="list-group">${htmlstr}</ul>`
    // bindEvent()
}

// 判断音乐是否正在播放
const isPlay = (audio) => {
    return !audio.paused
}

// 更新进度条状态
const updateProgressHTML = (currentTime, duration) => {
    const progress = Math.floor(currentTime / duration * 100)
    const elem = $('progress')
    if (elem) {
        elem.style.width = progress + '%'
        elem.innerHTML = progress + '%'
        const status = $('progress-status')
        status.innerHTML = convert(currentTime)
    }
    // 0-顺序播放 1-随机播放 2-单曲循环 3-列表循环
    // 顺序播放, 正常情况下, 也不让全局播放按钮进行突变/跃变
    // if (isPlay(audioItem || [1, 2, 3].indexOf(ctrlIndex) !== -1)) {
    //     $('play').classList.replace('fa-play', 'fa-pause')
    // } else {
    //     $('play').classList.replace('fa-pause', 'fa-play')
    // }
}


// 重置播放按钮的状态
const resetIcons = () => {
    const textElem = document.querySelector('.text-primary')
    removeClass(textElem, 'text-primary')
    // reset icon
    const resetElem = $('lists').querySelector('.fa-pause')
    if (resetElem) {
        resetElem.classList.replace('fa-pause', 'fa-play')
    }
}

// 设置正在播放的音乐状态
const setAudioText = (num) => {
    // 修改播放记录的字体与播放按钮的状态
    const elem = document.querySelectorAll('.list-group-item')[num]
    const playBtn = elem.querySelector('.fa-play')
    playBtn.classList.replace('fa-play', 'fa-pause')
    const firstChild = elem.firstElementChild
    addClass(firstChild, 'text-primary')
}

// 判断音乐正在播放, 修改全局播放按钮状态
const checkPlayStatus = () => {
    const classList = $('play').classList
    if (isPlay(audioItem)) {
        // 说明音乐正在播放
        if (classList.contains('fa-play')) {
            classList.replace('fa-play', 'fa-pause')
        }
    } else {
        // 说明音乐没有播放
        if (classList.contains('fa-pause')) {
            classList.replace('fa-pause', 'fa-play')
        }
    }
}

// 方法一: 绑定事件给play-btn
// const bindEvent = () => {
//     const elems = document.querySelectorAll('.list-group li')
//     elems.forEach((item) => {
//         const playBtn = item.querySelector('.fa-play')
//         playBtn.removeEventListener('click', function (event) {
//             const target = event.target
//             // console.log(target)
//         })
//         playBtn.addEventListener('click', function (event) {
//             const target = event.target
//             console.log(target)
//         })
//     })
// }

// 方法二: 绑定事件给外层元素, 利用浏览器的事件冒泡与事件代理
$('lists').addEventListener('click', function (event) {
    event.preventDefault()
    const target = event.target
    const classList = target.classList
    let id = ''
    if (classList.contains('fa')) {
        id = target.dataset.id
    }
    if (classList.contains('fa-play')) {
        // 音乐播放
        // 如果当前播放的音乐与将要播放的音乐相同, 则继续播放
        if (currentItem && currentItem.id === id) {
            audioItem.play()
        } else {
            // 表示是一首新的音乐
            currentItem = allItems.find(item => item.id === id)
            audioItem.src = currentItem.path
        }
        audioItem.play()
        // 切歌 reset icon
        // const resetElem = document.querySelector('.fa-pause')
        // if (resetElem) {
        //     resetElem.classList.replace('fa-pause', 'fa-play')
        // }
        // // 删除text-primary状态, 删除音乐选择状态
        // const textElem = document.querySelector('.text-primary')
        // removeClass(textElem, 'text-primary')
        resetIcons()
        classList.replace('fa-play', 'fa-pause')
        const parent = target.closest('.d-flex')
        addClass(parent, 'text-primary')
        // 设置全局的播放
        $('play').classList.replace('fa-play', 'fa-pause')
    } else if (classList.contains('fa-pause')) {
        // 音乐暂停
        audioItem.pause()
        // 设置全局的暂停
        $('play').classList.replace('fa-pause', 'fa-play')
        classList.replace('fa-pause', 'fa-play')
    } else if (classList.contains('fa-trash')) {
        // 删除音乐
        ipcRenderer.send('delete-item', id)
        if (currentItem.id === id) {
            audioItem.pause()
            // 设置全局的暂停
            $('play').classList.replace('fa-pause', 'fa-play')
            const progressWrap = $('progress-wrap')
            progressWrap.innerHTML = ''
        }
    }

})

const renderProgressHTML = (name, duration) => {
    const warp = $('progress-wrap')
    const html = `
    <div class="row d-flex justify-content-between align-items-center mb-2 px-3 pt-2 xc-pink">
                    <div class="font-weight-bold no-select" id="play-status">
                    <span id="ctrl" class="mr-3">
                        <i class="fa fa-sort-amount-asc d-inline" aria-hidden="true"></i>
                        <i class="fa fa-random d-none" aria-hidden="true"></i>
                        <i class="fa fa-refresh d-none" aria-hidden="true" ><span class="repeat-1">1</span></i>
                        <i class="fa fa-refresh d-none" aria-hidden="true"></i>
                    </span> 
                    <span id="volume" class="mr-3 no-select">
                        <span class="volume-icon d-inline">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        </span>
                        <span class="volume-icon mute-wrap d-none">
                        <i class="fa fa-volume-off" aria-hidden="true"></i>
                        <i class="fa fa-times mute" aria-hidden="true"></i>
                        </span>
                        <div class="volume d-none">
                            <div class="volume-progress bg-primary">
                                <i class="dot"></i>
                                <div class="volume-bar"></div>
                            </div>
                            <div class="arrow"></div>
                        </div>
                    </span>
                    正在播放: ${name}</div>
                    <div class="no-select"><span id="progress-status">00:00</span>/${convert(duration)}</div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" id="progress">0%</div>
                </div>`
    warp.innerHTML = html
}

// 设置播放模式
const setMusicMode = () => {
    // 设置成当前播放按钮的状态
    const elem = $('ctrl').querySelector('.d-inline')
    elem.classList.replace('d-inline', 'd-none')
    const currentElem = $('ctrl').querySelectorAll('.d-none')[ctrlIndex]
    // 删除了需要设置的按钮的d-none状态, 设置成了 d-inline
    currentElem.classList.replace('d-none', 'd-inline')
}

const moveDot = (evt) => {
    // 偏移量定义
    let dist = 0
    // 获取dot拖拽的方向, 拖拽的进度
    // 改变dot位置 -> top / height
    const dotElm = document.querySelector('.dot')
    // 改变进度条的高度 -> top / height
    const progress = document.querySelector('.volume-bar')
    // 改变音乐音量的大小
    const y = evt.y
    // 取得按钮的初始的位置
    const top = dotTop
    if (dotY === 0) {
        dotY = y
    } else {
        // 移动的距离
        let abs = Math.abs(dotY - y)
        if (dotY > y) {
            if (top - abs < 0) {
                dotElm.style.top = '0px'
                progress.style.height = '0%'
                audioItem.volume = 1
            } else {
                // 向上移动, 减少y值
                dotElm.style.top = top - abs + 'px'
                progress.style.height = Math.floor((top - abs) / 67 * 100) + '%'
                let result = 1 - (top - abs) / 67
                if(result > 1) {
                    result = 1
                }else if(result < 0) {
                    result = 0
                }
                audioItem.volume = result
                if (audioItem.volume > 0) {
                    changeVolumeIcon('show')
                }
            }
        } else {
            if (top + abs > 68) {
                dotElm.style.top = '68px'
                progress.style.height = '100%'
                audioItem.volume = 0
                changeVolumeIcon('mute')
            } else {
                // 向下移动, 增加y值
                dotElm.style.top = top + abs + 'px'
                progress.style.height = Math.floor((top + abs) / 68 * 100) + '%'
                let result = 1 - (top + abs) / 68
                if(result > 1) {
                    result = 1
                }else if(result < 0) {
                    result = 0
                }
                audioItem.volume = result
            }
        }
    }
}

// 添加音乐音量控制事件
const addVolumeEvent = () => {
    // 滑块事件
    document.querySelector('.dot').addEventListener('mousedown', (event) => {
        // 移动滑块事件
        this.addEventListener('mousemove', moveDot)
    })

    // 移除mousemove滑块的事件
    document.addEventListener('mouseup', (event) => {
        const dotElem = document.querySelector('.dot')
        const top = dotElem.style.top
        dotTop = top ? parseInt(top.replace('px', '')) : dotTop
        dotY = 0
        this.removeEventListener('mousemove', moveDot)
    })


    // 添加点击音量切换按钮事件
    $('volume').addEventListener('click', (event) => {
        const target = event.target
        const {
            classList
        } = target
        if (!classList.contains('fa')) {
            return
        }
        changeMuteMode()
        // const elemVolume = document.querySelectorAll('.volume-icon')[0]
        // const elemMute = document.querySelectorAll('.volume-icon')[1]
        // if (volumeStatus) {
        //     removeClass(elemVolume, 'd-inline')
        //     addClass(elemVolume, 'd-none')
        //     removeClass(elemMute, 'd-none')
        //     addClass(elemMute, 'd-inline')
        //     volumeStatus = false
        // } else {
        //     removeClass(elemMute, 'd-inline')
        //     addClass(elemMute, 'd-none')
        //     removeClass(elemVolume, 'd-none')
        //     addClass(elemVolume, 'd-inline')
        //     volumeStatus = true
        // }
    })
    // 鼠标移入时, 显示调节进度条
    $('volume').addEventListener('mouseover', (event) => {
        const elem = document.querySelector('.volume')
        removeClass(elem, 'd-none')
        addClass(elem, 'd-inline')
    })
    // 鼠标移出时, 隐藏调节音量进度条
    document.querySelector('.volume').addEventListener('mouseleave', (event) => {
        const elem = event.target
        removeClass(elem, 'd-inline')
        addClass(elem, 'd-none')
    })
}

// 设置音量初始位置
const setDotPosition = () => {
    // dotTop
    const dotElem = document.querySelector('.dot')
    const progress = document.querySelector('.volume-bar')
    dotElem.style.top = dotTop + 'px'
    progress.style.height = Math.floor(dotTop / (65 + dist) *100) + '%'
}

// 音频加载完成后, 触发的事件 loadedmetadata
audioItem.addEventListener('loadedmetadata', function () {
    const duration = audioItem.duration
    const name = currentItem.fileName
    renderProgressHTML(name, duration)

    // 设置音量初始位置
    setDotPosition()

    // 添加音乐音量控制事件
    addVolumeEvent()
    setMusicMode()

    // 动态计算列表的高度
    const progressWrap = $('progress-wrap').offsetHeight
    const app = $('app')
    app.style.paddingBottom = progressWrap + 15 + 'px'
    const progress = $('progress')
    progress.style.width = '0%'

    // 点击进度条, 调整到指定的播放位置
    document.querySelector('.progress').addEventListener('click', (event) => {
        // 当前点击的位置 / 进度条的长度 *100 = 快进的百分比
        const progressWidth = document.querySelector('.progress').offsetWidth
        const clickPosition = event.offsetX
        const percent = Math.floor(clickPosition / progressWidth * 100)
        const progress = $('progress')
        progress.innerHTML = percent + '%'
        progress.style.width = percent + '%'
        audioItem.currentTime = percent / 100 * audioItem.duration
    })

    // 播放按钮加入点击事件, 循环播放状态
    $('ctrl').addEventListener('click', (event) => {
        const target = event.target
        const ctrLen = $('ctrl').querySelectorAll('.fa').length
        const elem = $('ctrl').querySelector('.d-inline')
        removeClass(elem, 'd-inline')
        addClass(elem, 'd-none')
        // 判断控制列表的长度
        if (ctrlIndex < ctrLen - 1) {
            ctrlIndex++
        } else {
            ctrlIndex = 0
        }
        // 设置下一个控制按钮显示
        addClass($('ctrl').querySelectorAll('.fa')[ctrlIndex], 'd-inline')
    })
})


// 音频在播放中, 触发的事件 timeupdate
audioItem.addEventListener('timeupdate', function () {
    const duration = audioItem.duration
    const currentTime = audioItem.currentTime
    updateProgressHTML(currentTime, duration)
    // 说明当前的歌曲已经播放完成
    // ctrlIndex 0-顺序播放 1-随机播放 2-单曲循环 3-列表循环
    if (duration === currentTime) {
        if (ctrlIndex === 0) {
            // 删除text-primary状态, 删除音乐选择状态
            resetIcons()
            // 查找是否存在下一首music
            const index = allItems.indexOf(currentItem)
            if (index < allItems.length - 1) {
                // 说明存在下一首music
                currentItem = allItems[index + 1]
                audioItem.src = currentItem.path
                audioItem.play()
                // 修改播放记录的字体与播放按钮的状态
                setAudioText(index + 1)
            } else {
                // 设置全局的暂停
                $('play').classList.replace('fa-pause', 'fa-play')
                currentItem = null
                // 表示没有下一首音乐
                resetIcons()
                $('progress-wrap').innerHTML = ''
            }
        } else if (ctrlIndex === 1) {
            resetIcons()
            let num = Math.floor(Math.random() * allItems.length)
            let index = allItems.indexOf(currentItem)
            // 排除随机出来的音乐还是当前音乐
            while (num === index) {
                num = Math.floor(Math.random() * allItems.length)
            }
            currentItem = allItems[num]
            // 切换音乐源
            audioItem.src = currentItem.path
            audioItem.play()
            // 设置音乐字体的状态
            setAudioText(num)
        } else if (ctrlIndex === 2) {
            audioItem.play()
        } else if (ctrlIndex === 3) {
            // 删除text-primary状态, 删除音乐选择状态
            resetIcons()
            // 查找是否存在下一首music
            const index = allItems.indexOf(currentItem)
            if (index < allItems.length - 1) {
                // 说明存在下一首music
                currentItem = allItems[index + 1]
                // 修改播放记录的字体与播放按钮的状态
                setAudioText(index + 1)
            } else {
                currentItem = allItems[0]
                setAudioText(0)
            }
            audioItem.src = currentItem.path
            audioItem.play()
        }
    }
})